<template>
    <div class="common-container">
        <div class="header">
            <div class="header_left">
                <el-input style="width: 220px;" size="small" clearable @clear="clearNickname"
                    v-model.trim="search_val.dickName" placeholder="请输入字典名称">
                    <el-button class="el-input-group__append2" slot="append"
                        :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick"></el-button>
                </el-input>
                <el-popover placement="bottom" width="350" trigger="click" style="margin-left: 0px"
                    popper-class="popover" size="small" v-model="showPopover">
                    <div>
                        <el-form label-width="70px" style="margin: 20px 0" class="popover_from">
                            <el-form-item size="small" label="字典类型">
                                <el-input v-model.trim="search_val.dickType" placeholder="字典类型" size="small" clearable
                                    style="width: 95%; margin-left: 15px">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div class="footer" style="text-align: right">
                            <el-button size="small" @click="resetClick" class="cancel-button">重 置</el-button>
                            <el-button size="small" class="confirm-button" @click="searchClick2">
                                确 定
                            </el-button>
                        </div>
                    </div>
                    <el-button size="small" style="
                            margin-left: 15px;
                            background: #7367f0;
                            color: #fff;
                            border: none;
                            font-size: 14px;
                            padding: 8px 15px;
                        " slot="reference">
                        高级搜索
                        <i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i>
                    </el-button>
                </el-popover>

            </div>
            <div class="header_right">
                <el-button size="small" icon="el-icon-plus" style="margin-left: 15px" @click="onAdd">
                    新增
                </el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
                <el-table-column align="center" label="序号" type="index" width="80">
                </el-table-column>
                <el-table-column align="center" prop="dickName" label="字典名称" min-width="140">
                </el-table-column>
                <el-table-column align="center" prop="dickType" label="字典类型" min-width="140">
                    <template slot-scope="{ row }">
                        <span @click="dictClick(row)" class="search_space">{{ row.dickType }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="备注" min-width="140" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间" min-width="140">
                </el-table-column>
                <el-table-column align="center" prop="management" label="操作" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                            <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                            <i @click="onDel(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getDataList"
                :pageSizes="[10, 20, 30, 50]" class="pagination" />
        </div>

        <addDict ref="refAddSystemSetup"></addDict>
        <editDict ref="refEditSystemSetup" :editInfo="editInfo"></editDict>

    </div>
</template>

<script>
import addDict from "./components/addDict.vue";
import editDict from "./components/editDict.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqDictRemove, reqDictPage } from "@/api/api";
import advanceSearchMixin from "./mixins/advanceSearch.js";//高级搜索
import { mapMutations} from "vuex";

export default {
    name: "dict",
    components: {
        addDict,
        editDict,
        Pagination,
    },
    mixins: [tableStyleMixin, advanceSearchMixin],
    data() {
        return {
            loadingSearch: false, //查询按钮loading
            page: 1,
            limit: 10,
            total: 0,
            tableData: [],
            editInfo: {},
        };
    },
    mounted() { },
    computed: {},
    methods: {
        ...mapMutations(["selectMenu"]),
        dictClick(e) {
            // console.log(e);
            // this.$router.push({ name: "dictData", query: { id: e.id } });
            this.$router.push(`/system/dictData/index/${e.id}`);
            this.selectMenu({
                name: "字典数据",
                url: `/system/dictData/index/${e.id}`,
                value: "dictData",
            });
        },
        // 清空
        clearNickname() {
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
        //查询
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getDataList();
            this.loadingSearch = false;
        },
        // 新增
        onAdd() {
            this.$refs.refAddSystemSetup.dialogVisible = true;
        },
        onEdit(item) {
            this.editInfo = JSON.parse(JSON.stringify(item)); //深拷贝
            this.$refs.refEditSystemSetup.dialogVisible = true;
        },
        onDel(id) {
            this.$confirm("此操作将永久删除该字典, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await reqDictRemove(id);
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("删除字典成功");
                    this.getDataList();
                })
                .catch(() => { });
        },

        // 获取列表
        async getDataList() {
            let res = await reqDictPage(this.page, this.limit, this.search_val);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.tableData = res.data.rows;
            this.total = res.data.total;
        },
    },
    created() {
        this.getDataList();
    },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

::v-deep .header_right .el-button--small {
    background: #7367f0;
    color: #fff;
    border: none;
}

.search_space {
    padding: 0 10px;
    cursor: pointer;
    color: #7367f0;

    &:hover {
      text-decoration: underline;
    }
}

// 高级搜索
::v-deep .el-button--primary {
    background-color: #7367f0;
    border: 1px solid #7367f0;
    color: #fff;
}

::v-deep .el-form-item__label {
    color: @primaryThemeTxtColor2;
    padding: 0px;
}

::v-deep .el-input__inner {
    color: var(--primaryContentTxt, #f1f1f1) !important;
}

::v-deep .el-button--small {
    border: none;
}

// 高级搜索---
</style>